<template>
    <div>
      <RecycleScroller
          :items="listShow"
          :item-size="92"
          :ref="(el) => listRef = el"
          :style="{height: '600px' }"
          key-field="sku"
          v-slot="{ item }"
      >
          <div class="user">
              <div class="item-box">
                  <div>
                      <img class="img" :src="item.pic" @click.self="showBigImage(item.pic)" />
                  </div>
                  <div class="msg">
                      <div class="name t-0">{{ item['name'] }}</div>
                      <div class="sku">
                          <span class="t-9d mr-5">SKU:</span>
                          <span class="t-0">{{ item['sku'] }}</span>
                      </div>
                      <div class="msg-bottom">
                          <div>
                              <div class="t-red">{{ item.discount_price }}</div>
                              <div class="t-9d">
                                <span class="line-through mr-5">{{ item.price }}</span>
                                <span class="t-zs">{{ item.discount }}折</span>
                              </div>
                          </div>
                          <div>
                              <div class="t-0">{{ item.stock }}</div>
                              <div class="t-9d">库存</div>
                          </div>
                          <div v-if="isShopCart">
                              <el-input-number v-model="item.num" :min="1" :max="item.stock" size="small" label="描述文字" @change="$emit('change', item)"/>
                          </div>
                          <div>
                            <el-icon v-if="!isShopCart && item.stock" :size="20" :class="shoppingCartSku.includes(item.sku) ? 't-red': ''" class="t-9d" @click="$emit('add', item)"><StarFilled /></el-icon>
                            <el-icon v-if="isShopCart" :size="20" class="t-red" @click="$emit('remove', item)"><Delete /></el-icon>
                          </div>
                      </div>
                      
                  </div>
              </div>
          </div>
      </RecycleScroller>
      <BigImg :visible="photoVisible" :url="bigImgUrl" @closeClick="()=>{photoVisible=false}" />
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { RecycleScroller } from "vue-virtual-scroller"
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
import { StarFilled, Delete } from '@element-plus/icons-vue'
import BigImg from "./bigImg.vue"

// defineOptions({ name: 'ProductList'})

defineProps({
  height: String,
  listShow: Array,
  shoppingCartSku: Array,
  isShopCart: Boolean
})

defineExpose({ setListElScrollTop })

const listRef = ref('')
const photoVisible = ref(false)
const bigImgUrl = ref('')

//点击图片函数，点击后，把photoVisible设置成true
function showBigImage(url) {
  if (url != "") {
    photoVisible.value = true;
    bigImgUrl.value = url;
  }
}

function setListElScrollTop() {
  listRef.value.$el.scrollTop = 0
}
</script>

<style scoped>

.user {
  height: 92px;
}
.item-box{
    display: flex;
    justify-content: start;
    background: #eeeeee;
    margin-top: 5px;
}
.img{
    height: 85px;
    width: 85px;
}
.msg{
    width: 100%;
    line-height: 15px;
    font-size: 12px;
    text-align: left;
    padding: 0 5px;
}
.sku{
    padding: 2px 0;
}
.msg-bottom{
    display: flex;
    justify-content: space-between;
    text-align: center;
}
.name{
    text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-top: 4px;
  height: 30px;
}
.mr-5{
    margin-right: 5px;
}
.line-through{ text-decoration: line-through;} 
.t-9d{ color: #9d9d9d; }
.t-zs{ color: #ab0bf5; }
.t-red{ color: #ff6e72; }
.t-0{ color: #232f3b; }

</style>